<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>政府公文知识库管理系统</title>
    <style>
        /* 全局样式 */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: "Microsoft YaHei", sans-serif;
        }

        body {
            background-color: #f0f2f5;
            color: #333;
        }

        /* 顶部导航栏 */
        .header {
            height: 60px;
            background: linear-gradient(135deg, #1a5fb4, #0d47a1);
            color: white;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0 20px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        }

        .logo {
            display: flex;
            align-items: center;
        }

        .logo img {
            height: 36px;
            margin-right: 10px;
        }

        .user-info {
            display: flex;
            align-items: center;
        }

        .user-avatar {
            width: 36px;
            height: 36px;
            border-radius: 50%;
            background-color: #fff;
            color: #1a5fb4;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-left: 15px;
            font-weight: bold;
            cursor: pointer;
        }

        /* 主布局 */
        .container {
            display: flex;
            height: calc(100vh - 60px);
        }

        /* 左侧菜单 */
        .sidebar {
            width: 220px;
            background-color: #fff;
            border-right: 1px solid #e8e8e8;
            padding: 15px 0;
            overflow-y: auto;
        }

        .menu-item {
            padding: 12px 20px;
            cursor: pointer;
            transition: all 0.3s;
            display: flex;
            align-items: center;
        }

        .menu-item:hover {
            background-color: #f0f7ff;
            color: #1a5fb4;
        }

        .menu-item.active {
            background-color: #e6f0ff;
            color: #1a5fb4;
            border-right: 3px solid #1a5fb4;
        }

        .menu-item i {
            margin-right: 10px;
            font-size: 16px;
        }

        .menu-group {
            margin-bottom: 15px;
        }

        .menu-group-title {
            padding: 8px 20px;
            color: #666;
            font-size: 12px;
            text-transform: uppercase;
        }

        /* 主内容区 */
        .main-content {
            flex: 1;
            padding: 20px;
            overflow-y: auto;
        }

        .page-title {
            font-size: 20px;
            margin-bottom: 20px;
            color: #333;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

        /* 知识库树状结构 */
        .knowledge-container {
            display: flex;
            height: calc(100% - 50px);
        }

        .tree-panel {
            width: 280px;
            background-color: #fff;
            border-radius: 4px;
            padding: 15px;
            margin-right: 20px;
            overflow-y: auto;
            box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
        }

        .tree-node {
            padding: 8px 0;
            cursor: pointer;
        }

        .tree-node-content {
            display: flex;
            align-items: center;
            padding: 5px 0;
            border-radius: 4px;
        }

        .tree-node-content:hover {
            background-color: #f5f5f5;
        }

        .tree-node-content.active {
            background-color: #e6f0ff;
            color: #1a5fb4;
        }

        .tree-node-icon {
            margin-right: 8px;
            color: #666;
        }

        .tree-node-children {
            padding-left: 20px;
            display: none;
        }

        .tree-node.expanded .tree-node-children {
            display: block;
        }

        /* 文件列表 */
        .file-panel {
            flex: 1;
            background-color: #fff;
            border-radius: 4px;
            padding: 15px;
            overflow-y: auto;
            box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
        }

        .file-toolbar {
            display: flex;
            justify-content: space-between;
            margin-bottom: 15px;
            padding-bottom: 15px;
            border-bottom: 1px solid #eee;
        }

        .breadcrumb {
            display: flex;
            align-items: center;
        }

        .breadcrumb-item {
            color: #666;
            cursor: pointer;
        }

        .breadcrumb-item:hover {
            color: #1a5fb4;
        }

        .breadcrumb-separator {
            margin: 0 8px;
            color: #999;
        }

        .file-actions button {
            margin-left: 10px;
            padding: 6px 12px;
            background-color: #1a5fb4;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }

        .file-actions button:hover {
            background-color: #0d47a1;
        }

        .file-list {
            width: 100%;
            border-collapse: collapse;
        }

        .file-list th {
            text-align: left;
            padding: 10px;
            background-color: #f5f5f5;
            border-bottom: 1px solid #eee;
        }

        .file-list td {
            padding: 12px 10px;
            border-bottom: 1px solid #eee;
        }

        .file-list tr:hover td {
            background-color: #f9f9f9;
        }

        .file-icon {
            margin-right: 8px;
            color: #666;
        }

        .file-action {
            color: #1a5fb4;
            margin-right: 15px;
            cursor: pointer;
        }

        /* 响应式设计 */
        @media (max-width: 768px) {
            .container {
                flex-direction: column;
            }

            .sidebar {
                width: 100%;
                height: auto;
            }

            .knowledge-container {
                flex-direction: column;
            }

            .tree-panel {
                width: 100%;
                margin-right: 0;
                margin-bottom: 20px;
            }
        }
    </style>
    <!-- 使用Font Awesome图标 -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
</head>
<body>
<!-- 顶部导航栏 -->
<div class="header">
    <div class="logo">
        <img src="" alt="政府徽标">
        <h1>政府公文知识库管理系统</h1>
    </div>
    <div class="user-info">
        <span>管理员</span>
        <div class="user-avatar">A</div>
    </div>
</div>

<!-- 主布局 -->
<div class="container">
    <!-- 左侧菜单 -->
    <div class="sidebar">
        <div class="menu-group">
            <div class="menu-group-title">主导航</div>
            <div class="menu-item active">
                <i class="fas fa-home"></i>
                <span>首页</span>
            </div>
            <div class="menu-item">
                <i class="fas fa-book"></i>
                <span>知识库管理</span>
            </div>
            <div class="menu-item">
                <i class="fas fa-robot"></i>
                <span>AI应用管理</span>
            </div>
        </div>

        <div class="menu-group">
            <div class="menu-group-title">系统管理</div>
            <div class="menu-item">
                <i class="fas fa-users"></i>
                <span>用户管理</span>
            </div>
            <div class="menu-item">
                <i class="fas fa-cog"></i>
                <span>系统设置</span>
            </div>
        </div>
    </div>

    <!-- 主内容区 -->
    <div class="main-content">
        <div class="page-title">
            <span>知识库 - 2023年度政府公文</span>
            <button id="toggle-view"><i class="fas fa-th-list"></i> 切换视图</button>
        </div>

        <div class="knowledge-container">
            <!-- 左侧树状目录 -->
            <div class="tree-panel">
                <div class="tree-node expanded">
                    <div class="tree-node-content">
                        <i class="fas fa-folder tree-node-icon"></i>
                        <span>2023年度</span>
                    </div>
                    <div class="tree-node-children">
                        <div class="tree-node expanded">
                            <div class="tree-node-content">
                                <i class="fas fa-folder tree-node-icon"></i>
                                <span>市政府文件</span>
                            </div>
                            <div class="tree-node-children">
                                <div class="tree-node">
                                    <div class="tree-node-content">
                                        <i class="fas fa-folder tree-node-icon"></i>
                                        <span>通知</span>
                                    </div>
                                </div>
                                <div class="tree-node">
                                    <div class="tree-node-content">
                                        <i class="fas fa-folder tree-node-icon"></i>
                                        <span>决定</span>
                                    </div>
                                </div>
                                <div class="tree-node expanded active">
                                    <div class="tree-node-content">
                                        <i class="fas fa-folder tree-node-icon"></i>
                                        <span>会议纪要</span>
                                    </div>
                                    <div class="tree-node-children">
                                        <div class="tree-node">
                                            <div class="tree-node-content">
                                                <i class="fas fa-file-alt tree-node-icon"></i>
                                                <span>第一季度工作会议</span>
                                            </div>
                                        </div>
                                        <div class="tree-node">
                                            <div class="tree-node-content">
                                                <i class="fas fa-file-alt tree-node-icon"></i>
                                                <span>疫情防控专题会议</span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="tree-node">
                            <div class="tree-node-content">
                                <i class="fas fa-folder tree-node-icon"></i>
                                <span>各部门文件</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 右侧文件列表 -->
            <div class="file-panel">
                <div class="file-toolbar">
                    <div class="breadcrumb">
                        <span class="breadcrumb-item">2023年度</span>
                        <span class="breadcrumb-separator">/</span>
                        <span class="breadcrumb-item">市政府文件</span>
                        <span class="breadcrumb-separator">/</span>
                        <span class="breadcrumb-item">会议纪要</span>
                    </div>
                    <div class="file-actions">
                        <button id="upload-btn"><i class="fas fa-upload"></i> 上传文件</button>
                        <button id="new-folder-btn"><i class="fas fa-folder-plus"></i> 新建文件夹</button>
                    </div>
                </div>

                <table class="file-list">
                    <thead>
                    <tr>
                        <th width="40%">文件名</th>
                        <th width="20%">修改日期</th>
                        <th width="15%">大小</th>
                        <th width="25%">操作</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr>
                        <td>
                            <i class="fas fa-file-word file-icon" style="color: #2b579a;"></i>
                            <span>2023年第一季度工作会议纪要.docx</span>
                        </td>
                        <td>2023-03-15</td>
                        <td>2.4 MB</td>
                        <td>
                            <span class="file-action"><i class="fas fa-eye"></i> 预览</span>
                            <span class="file-action"><i class="fas fa-download"></i> 下载</span>
                            <span class="file-action"><i class="fas fa-share-alt"></i> 分享</span>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <i class="fas fa-file-pdf file-icon" style="color: #d94a3d;"></i>
                            <span>疫情防控专题会议纪要.pdf</span>
                        </td>
                        <td>2023-02-28</td>
                        <td>5.1 MB</td>
                        <td>
                            <span class="file-action"><i class="fas fa-eye"></i> 预览</span>
                            <span class="file-action"><i class="fas fa-download"></i> 下载</span>
                            <span class="file-action"><i class="fas fa-share-alt"></i> 分享</span>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <i class="fas fa-file-excel file-icon" style="color: #217346;"></i>
                            <span>第一季度工作会议参会人员名单.xlsx</span>
                        </td>
                        <td>2023-03-10</td>
                        <td>1.2 MB</td>
                        <td>
                            <span class="file-action"><i class="fas fa-eye"></i> 预览</span>
                            <span class="file-action"><i class="fas fa-download"></i> 下载</span>
                            <span class="file-action"><i class="fas fa-share-alt"></i> 分享</span>
                        </td>
                    </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

<script>
    // 简单的交互逻辑
    document.addEventListener('DOMContentLoaded', function() {
        // 树节点点击事件
        const treeNodes = document.querySelectorAll('.tree-node-content');
        treeNodes.forEach(node => {
            node.addEventListener('click', function(e) {
                e.stopPropagation();

                // 移除所有active类
                treeNodes.forEach(n => {
                    n.classList.remove('active');
                });

                // 添加active类到当前节点
                this.classList.add('active');

                // 切换展开/折叠
                const parentNode = this.parentElement;
                if (parentNode.querySelector('.tree-node-children')) {
                    parentNode.classList.toggle('expanded');
                }
            });
        });

        // 上传按钮点击事件
        document.getElementById('upload-btn').addEventListener('click', function() {
            alert('文件上传功能将在此处实现');
        });

        // 新建文件夹按钮点击事件
        document.getElementById('new-folder-btn').addEventListener('click', function() {
            const folderName = prompt('请输入文件夹名称:');
            if (folderName) {
                alert(`将创建文件夹: ${folderName}`);
            }
        });

        // 切换视图按钮
        document.getElementById('toggle-view').addEventListener('click', function() {
            alert('将在此处切换列表/缩略图视图');
        });
    });
</script>
</body>
</html>